<shortcuts>
        <i class="icon-keyboard"  onclick={showkeymaps}></i>
    <script>
        this.showkeymaps = function(){
            $.dialog({
                title: 'Keymap',
                content: `
                <p>File Management</p>
                <table>
                    <tr><td><kbd>Alt</kbd> + <kbd>o</kbd></td><td> Open images.<td></tr>
                    <tr><td><kbd>Shift</kbd> + <kbd>Alt</kbd> + <kbd>o</kbd></td><td> Open image folder.<td></tr>
                    <tr><td><kbd>Ctrl</kbd> + <kbd>i</kbd></td><td> Import data file.<td></tr>
                    <tr><td><kbd>Ctrl</kbd> + <kbd>e</kbd></td><td> Export data file.<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>Left/Right Arrow</kbd></td><td> Navigate & load images from slider to workarea.<td></tr>
                </table>
                <br>
                <p>Shape Manipulation</p>
                <table>
                    <tr><td><kbd>Del</kbd></td><td> Delete selected shapes or feature points.<td></tr>
                    <tr><td><kbd>Enter</kbd></td><td> Confirm action.<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>a</kbd></td><td> Select all shapes.<td></tr>
                    <tr><td><kbd>Ctrl</kbd> + <kbd>Left</kbd></td><td> Move the selected shapes by 1 pixel to the left.<td></tr>
                    <tr><td><kbd>Ctrl</kbd> + <kbd>Right</kbd></td><td> Move the selected shapes by 1 pixel to the right.<td></tr>
                    <tr><td><kbd>Ctrl</kbd> + <kbd>Up</kbd></td><td> Move the selected shapes by 1 pixel to the up.<td></tr>
                    <tr><td><kbd>Ctrl</kbd> + <kbd>Down</kbd></td><td> Move the selected shapes by 1 pixel to the down.<td></tr>
                </table>
                <br>
                <p>Tools</p>
                <table> 
                    <tr><td><kbd>Alt</kbd> + <kbd>f</kbd></td><td> Feature Point<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>c</kbd></td><td> Circle<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>e</kbd></td><td> Ellipse<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>r</kbd></td><td> Rectangle<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>p</kbd></td><td> Polygon<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>w</kbd></td><td> Magic wand<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>m</kbd></td><td> Move<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>+</kbd></td><td> Zoom<td></tr>
                    <tr><td><kbd>Alt</kbd> + <kbd>l</kbd></td><td> Light<td></tr>
                </table>
                `,
                escapeKey: true,
                backgroundDismiss: true,
                columnClass: 'col-md-8 col-md-offset-4 col-xs-4 col-xs-offset-8',
            });
        }
    </script>
</shortcuts>